<template>
  <Page name="确认支付">
    <div class="info">
      <div class="amount"><span class="price">{{form.amount}}</span> {{form.currency_code}}</div>
      <div class="remark">转账金额</div>
    </div>
    <div class="list-item">
      <div class="item">
        <div class="left">订单信息</div>
        <div class="right">{{form.remark ? form.remark : '转账'}}</div>
      </div>
      <div class="item">
        <div class="left">付款方式</div>
        <div class="right">乐钱包</div>
      </div>
      <div class="item">
        <div class="left">资金扣款组合</div>
        <div class="right">{{form.amount}} {{form.currency_code}}</div>
      </div>
    </div>
    <div class="form-btn">
      <button class="btn btn-primary btn-block" :disabled="posting" @click="submit">立即支付</button>
    </div>

    <Keyboard
      v-if="showKeyboard"
      type="accept_pay"
      title="密码支付"
      label="请输入支付密码"
      :loading="posting"
      :params="{
        to_uid:this.userInfo.uid,
        currency_code:this.form.currency_code,
        amount:this.form.amount,
        remark:this.form.remark,
        pay_type:3,
      }"
      @success="success"
      @close="showKeyboard = false"
       />
  </Page>
</template>
<script>
import Page from '~/components/page'
import Keyboard from '~/components/Keyboard'
export default {
  components:{
    Page,
    Keyboard
  },
  validate({store,redirect}){
    // 如果userInfo为空，表示没有经过上一步操作非法进入页面
    if(!store.state.accept.userInfo || !store.state.accept.form){
      redirect('/accept')
    }
    return true;
  },
  asyncData({store}){
    return {
      form: store.state.accept.form,
      userInfo: store.state.accept.userInfo
    }
  },
  data(){
    return {
      loading:false,
      posting:false,
      showKeyboard:false
    }
  },
  methods:{
    submit(){
      if(this.showKeyboard) return false;
      this.showKeyboard = true;
      return false;
    },
    success(data){
      this.$store.commit('accept/setStatus',data);
      this.$router.push('status');
    }
  }
}
</script>

<style lang="less" scoped>
.info {
  display: flex;
  flex-direction: column;
  justify-content: center;;
  align-items: center;
  width:100%;
  height:240px;
  overflow: hidden;
  padding:0 28px;
  background-color:#fff;
  .amount,.remark {
    max-width: 100%;
    .text-ellipsis();

  }
  .amount {
    font-size:30px;
    color:#292929;
    .price {
      font-size:60px;
    }
  }
  .remark {
    font-size:30px;
    margin-top:30px;
    color:#999;
  }

}

.form-btn {
  margin:60px 30px;
}
</style>
